<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <el-form :inline="true" :model="searchMap.data" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="searchMap.data.moduleCode"
          placeholder="权限编号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          @click="
            dialogFormVisible = true;
            TreeNode = [];
            tree();
          "
          >权限添加</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 权限列表 -->
    <el-table :data="moduleList" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="moduleCode" label="菜单编码" />
      <el-table-column prop="moduleName" label="功能名称" />
      <el-table-column prop="linkUrl" label="请求路径"/>
      <el-table-column prop="moduleDesc" label="权限描述" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          > -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button>
          <el-button
            type="warning"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="searchMap.page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"
    >
    </el-pagination>
    <!-- 添加修改弹出页 -->
    <el-dialog
      :title="'权限列表'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="sysModule">
        <el-form-item label="权限名称" label-width="100px">
          <el-tree
            :data="TreeNode"
            show-checkbox
            node-key="id"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
          >
            <span class="custom-tree-node" slot-scope="{ data }">
              <span>{{ data.title }}</span>
              <span>
                <el-button type="text" size="mini" @click="() => update(data)">
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button type="text" size="mini" @click="() => append(data)">
                  <i class="el-icon-plus"></i>
                </el-button>
                <el-button type="text" size="mini" @click="() => remove(data)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </span>
            </span>
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="新增子菜单"
      :visible.sync="addCategoryByParentIdDialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="addForm" label-width="80px">
        <el-form-item label="功能名称">
          <el-input v-model="addForm.moduleName"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="addCategoryByParentIdDialogVisible = false" class="el-button el-button--default"
        >取 消</el-button
      >
      <el-button type="primary" @click="save()" class="el-button el-button--default">确 定</el-button>
    </el-dialog>

    <el-dialog
      title="修改子菜单"
      :visible.sync="updateDiaLog"
      width="30%"
    >
      <el-form ref="form" :model="addForm" label-width="80px">
        <el-form-item label="功能名称">
          <el-input v-model="addForm.moduleName"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="updateDiaLog = false" class="el-button el-button--default"
        >取 消</el-button
      >
      <el-button type="primary" @click="updateById()" class="el-button el-button--default">确 定</el-button>
    </el-dialog>


    <el-dialog
      title="修改子菜单"
      :visible.sync="updateByIDiaLog"
      width="30%"
    >
      <el-form ref="form" :model="addForm" label-width="80px">
        <el-form-item label="功能名称">
          <el-input v-model="addForm.moduleName"></el-input>
        </el-form-item>
        <el-form-item label="请求路径">
          <el-input v-model="addForm.linkUrl"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
      <el-button @click="updateByIDiaLog = false" >取 消</el-button>
      <el-button type="primary" @click="updateOne()" >确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import {
  search,
  treeNode,
  save,
  delById,
} from "@/api/module";
import template from './template.vue';
let id = 1000;
export default {
  components: { template },
  data() {
    return {
      addCategoryByParentIdDialogVisible: false,
      TreeNode: [],//树
      addForm: {},//添加信息
      total: 0,//总记录数
      dialogFormVisible: false, //添加弹窗开关
      updateDiaLog:false,//修改弹窗
      updateByIDiaLog:false,
      searchMap: {
        page: 1,
        limit: 5,
        data: {},
      },
      moduleList: [],//当前页数据
      pages: 0,
      sysModule: {},
      delData: {}, //删除的信息
      delAllData: {}, //批量删除数据
    };
  },
  methods: {
    // 查询
    search() {
      search(this.searchMap).then((res) => {
        this.moduleList = res.data;
        this.pages = res.pages;
        this.total = res.total;
      });
    },
    tree() {
      treeNode().then((res) => {
        this.TreeNode.push(res);
      });
    },
    //每页条数
    handleSizeChange(size) {
      this.searchMap.limit = size;
      this.search();
    },
    //当前页数
    handleCurrentChange(currentPage) {
      this.searchMap.page = currentPage;
      this.search();
    },
    //删除
    remove(data) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delById({ moduleCode: data.id }).then((res) => {
          if (res.success) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
            this.search();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
            this.dialogFormVisible = false;
            this.addCategoryByParentIdDialogVisible = false;
            this.addForm = {};
            this.search();
          
        });
      });
    },
    //删除
    handleDelete(index,row){
        console.log(row)
        this.$confirm("此操作将永久删除该节点, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delById({ moduleCode: row.moduleCode}).then((res) => {
          if (res.success) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
            this.search();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        });
      });
    },
    //修改
    update(data) {
        this.addForm=[]
        this.updateDiaLog = true;
        this.addForm.moduleCode = data.id;
        this.addForm.name=data.
        this.addForm.moduleName

    },
    updateById(){
        save({
            moduleCode:this.addForm.moduleCode,
            moduleDesc: this.addForm.name,
            parentModule: this.addForm.parentModule,
            moduleName: this.addForm.moduleName,
        }).then((res)=>{
             if (res.success) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
            this.search();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
          this.dialogFormVisible = false;
          this.updateDiaLog = false;
          this.addForm = {};
          this.search();
        })

    },
    handleEdit(index,row){
      let that = this;
        this.updateByIDiaLog=true
      that.$set(that.addForm,'name',row.moduleDesc);
      that.$set(that.addForm,'linkUrl',row.linkUrl);
      that.$set(that.addForm,'moduleName',row.moduleName);
      that.$set(that.addForm,'moduleCode',row.modmoduleCodeuleDesc);

        // this.addForm.name=row.moduleDesc
        // this.addForm.linkUrl=row.linkUrl
        // this.addForm.moduleName=row.moduleName
        // this.addForm.moduleCode=row.moduleCode
    },
    updateOne(){
        save(
            {
                moduleCode:this.addForm.moduleCode,
                moduleName:this.addForm.moduleName,
                moduleDesc:this.addForm.moduleDesc,
                linkUrl:this.addForm.linkUrl
            }).then((res)=>{
                
            if (res.success) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
          this.dialogFormVisible = false;
          this.updateByIDiaLog = false;
          this.addForm = {};
          this.search();
        })
    },
    //添加
    append(data) {
      // console.log(data)
      this.addForm=[]
      this.addForm.parentModule = data.id;
      this.addCategoryByParentIdDialogVisible = true;
    },
    /**
     * 新增子节点
     */
    save() {
      //把新增子节点的parentId设置为获取到的节点id
      console.log(this.addForm.moduleCode);
      save({
        moduleDesc: this.addForm.name,
        parentModule: this.addForm.parentModule,
        moduleName: this.addForm.moduleName,
      }).then((res) => {
        if (res.success) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
            this.search();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
          this.dialogFormVisible = false;
          this.addCategoryByParentIdDialogVisible = false;
          this.addForm = {};
          this.search();
        
      });
    },
    



  },

  //页面加载时显示数据
  created() {
    this.search();
  },
};
</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>